<!--
Module: NBIOT 配置页面
Author: 吴金根
date:2017/11/02
-->
<template>
    <div class="page-box">
        <Nav :indexs="1"  @clickit="gettoken"></Nav>
        <div class="pageconfig-wrap">
            <div class="pageconfig-buttons">
                <el-button type="primary" round @click="add">
                    <i class="el-icon-plus el-icon--left"></i>添加</el-button>
                <el-button type="primary" round @click="deleteRow">
                    <i class="el-icon-delete el-icon--left"></i>删除</el-button>

            </div>

            <div class="pageconfig-table">
                <el-table highlight-current-row="true" border :data="rows" :max-height="SystemTable" @row-click="onchange">
                    <el-table-column prop="appid" label="应用程序ID" align="left">
                    </el-table-column>
                    <el-table-column prop="secret" label="秘匙" align="left">
                    </el-table-column>
                    <el-table-column prop="service" label="IOT平台地址" align="left">
                    </el-table-column>
                    <el-table-column prop="protocol" label="插件协议" align="left">
                    </el-table-column>
                    <el-table-column prop="subsdeviceDatasChanged" label="数据订阅" align="center" width="120" :formatter="formattertxt">
                    </el-table-column>
                    <el-table-column prop="subscommandRsp" label="指令订阅" align="center" width="120" :formatter="formattertxt">
                    </el-table-column>
                </el-table>
            </div>
            <div class="pageconfig-form">
                <div class="pageconfig-form-main">
                    <el-form ref="form" :rules="rules" :model="form" label-width="120px" label-position="left" v-loading.fullscreen.lock="loading" element-loading-text="信息保存中">
                        <el-form-item label="应用程序ID" prop="appid">
                            <el-input :disabled="isupdate" v-model="form.appid" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="秘匙" prop="secret">
                            <el-input :disabled="isupdate" v-model="form.secret" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="IOT平台地址" prop="service">
                            <el-input :disabled="isupdate" v-model="form.service" placeholder=""></el-input>
                        </el-form-item>

                        <el-form-item label="插件协议" prop="protocol">
                            <el-select :disabled="isupdate" v-model="form.protocol" placeholder="请选择插件协议">
                                <el-option label="YL809" value="YL809"></el-option>
                                <el-option label="HD86" value="HD86"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="submit-btn">
                            <el-button :disabled="isupdate" type="primary" @click="submitForm('form')">保存</el-button>
                            <el-button :disabled="isupdate" @click="resetForm()">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!--添加列表弹窗-->
            <el-dialog title="添加" @close="closedialog" :visible.sync="dialogFormVisible">

                <el-form class="addform-wrap" ref="addform" :rules="addrules" :model="addform" label-width="130px" label-position="left" v-loading.fullscreen.lock="loading" element-loading-text="信息保存中">
                    <el-form-item label="应用程序ID" prop="appid">
                        <el-input v-model="addform.appid" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="秘匙" prop="secret">
                        <el-input v-model="addform.secret" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="IOT平台地址" prop="service">
                        <el-input v-model="addform.service" placeholder=""></el-input>
                    </el-form-item>

                    <el-form-item label="插件协议" prop="protocol">
                        <el-select v-model="addform.protocol" placeholder="请选择插件协议">
                            <el-option label="YL809" value="YL809"></el-option>
                            <el-option label="HD86" value="HD86"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="submit-btn">
                        <el-button type="primary" @click="submitaddForm('addform')">保存</el-button>
                        <el-button @click="resetaddForm()">取消</el-button>
                    </el-form-item>

                </el-form>
            </el-dialog>
            <!--添加列表弹窗-->
        </div>
    </div>   
</template>
<script>
import Nav from "../components/nav.vue";
export default {
  components: {
    Nav
  },
    data() {
        return {
            loading: false,
            deleteid: null,
            dialogFormVisible: false,//添加列表弹窗
            isupdate: true,//是否可编辑
            form: {
                appid: '',//应用程序ID
                secret: '',//秘匙
                service: '',//dz
                protocol: '',//插件协议

            },//表单提交修改
            addform: {
                appid: '',//应用程序ID
                secret: '',//秘匙
                service: '',//dz
                protocol: '',//插件协议
            },
            rows: [

            ],//配置页面列表
            rules: {
                appid: [
                    { required: true, message: '应用程序ID不能为空。', trigger: 'blur' }
                ],
                secret: [
                    { required: true, message: '秘匙不能为空。', trigger: 'blur' }
                ],
                service: [
                    { required: true, message: 'IOT平台地址不能为空。', trigger: 'blur' }
                ],
                protocol: [
                    { required: true, message: '插件协议不能为空。', trigger: 'blur' }
                ],
            },
            addrules: {
                appid: [
                    { required: true, message: '应用程序ID不能为空。', trigger: 'blur' }
                ],
                secret: [
                    { required: true, message: '秘匙不能为空。', trigger: 'blur' }
                ],
                service: [
                    { required: true, message: 'IOT平台地址不能为空。', trigger: 'blur' }
                ],
                protocol: [
                    { required: true, message: '插件协议不能为空。', trigger: 'blur' }
                ],
            }
        }
    },
    computed: {
        SystemTable: function() {
            var H = $(window).height() - 20 - 56 - 140;

            return H;
        },

    },
    methods: {
        submitForm(form) {
            let self = this;

            this.$refs.form.validate((valid) => {
                if (valid) {

                    let self = this;

                    /*------ 确定提交按钮------*/
                    this.$confirm('是否确定保存？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {

                        /*------ 执行操作------*/
                        self.loading = true;

                        jQuery.ajax({
                            type: "POST",
                            url: "/iot/ycb/createapp/",
                            contentType: "application/json",
                            data: JSON.stringify(
                                self.form
                            ),
                            dataType: "json",
                            success: function(rep) {
                                self.loading = false
                                if (typeof (rep) == "string") {
                                    try {
                                        rep = JSON.parse(rep);
                                    } catch (err) {
                                        rep = {
                                            Code: 99999,
                                            Message: '数据初始化失败，请稍后再试！'
                                        }
                                    }
                                }
                                if (rep.Code == 0) {
                                    slef.$message({
                                        message: '数据修改成功',
                                        type: 'success'
                                    });
                                    self.Getlisttable()//重新查询数据
                                }
                                else {
                                    self.$message.error(rep.Message);
                                }
                            }
                        })
                        /*------ 执行操作------*/
                        self.loading = false

                    }).catch(() => {
                        return false
                    });
                    /*------ 确定提交按钮------*/


                } else {

                    return false;
                }
            });
        },
        submitaddForm(addform) {

            let self = this;

            this.$refs.addform.validate((valid) => {
                if (valid) {

                    let self = this;

                    /*------ 确定提交按钮------*/
                    /*------ 执行操作------*/
                    self.loading = true;
                    jQuery.ajax({
                        type: "POST",
                        url: "/iot/ycb/createapp/",
                        contentType: "application/json",
                        data: JSON.stringify(
                            self.addform
                        ),
                        dataType: "json",
                        success: function(rep) {
                            self.loading = false
                            if (typeof (rep) == "string") {
                                try {
                                    rep = JSON.parse(rep);
                                } catch (err) {
                                    rep = {
                                        Code: 99999,
                                        Message: '数据初始化失败，请稍后再试！'
                                    }
                                }
                            }
                            if (rep.Code == 0) {
                                self.$message({
                                    message: '数据保存成功',
                                    type: 'success'
                                });
                                self.closedialog()
                                self.Getlisttable()//重新查询数据
                            }
                            else {
                               
                                self.$message.error(rep.Message);
                            }
                        }
                    })
                    /*------ 执行操作------*/

                    /*------ 确定提交按钮------*/


                } else {

                    return false;
                }
            });
        },
        resetForm() {
            let self = this;
            self.form = {
                appid: '',//应用程序ID
                secret: '',//秘匙
                service: '',//dz
                protocol: '',//插件协议
            }
        },
        resetaddForm() {
            //取消重新填
            let self = this;
            self.addform = {
                appid: '',//应用程序ID
                secret: '',//秘匙
                service: '',//dz
                protocol: '',//插件协议
            }
        },
        add() {
            //新增
            let self = this;
            self.isupdate = true;
            self.dialogFormVisible = true

        },
        closedialog() {
            //关闭弹窗
            let self = this;
            self.isupdate = false;
            self.dialogFormVisible = false;
            self.addform = {
                appid: '',//应用程序ID
                secret: '',//秘匙
                service: '',//dz
                protocol: '',//插件协议
            }

        },
        deleteRow: function() {
            let self = this;
            if (self.deleteid != null) {

                /*------ 确定提交按钮------*/
                this.$confirm('是否确定要删除？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    /*------ 执行操作------*/
                    jQuery.ajax({
                        type: "POST",
                        url: "/iot/ycb/deleteapp/",
                        contentType: "application/json",
                        data: JSON.stringify(
                            {
                                "appid": self.deleteid
                            }
                        ),
                        dataType: "json",
                        success: function(rep) {
                            self.loading = false
                            if (typeof (rep) == "string") {
                                try {
                                    rep = JSON.parse(rep);
                                } catch (err) {
                                    rep = {
                                        Code: 99999,
                                        Message: '数据初始化失败，请稍后再试！'
                                    }
                                }
                            }
                            if (rep.Code == 0) {
                                self.$message({
                                    message: '数据删除成功',
                                    type: 'success'
                                });
                                self.deleteid == null
                                self.Getlisttable()//重新查询数据
                            }
                            else {
                                
                               self.$message.error(rep.Message);
                            }
                        }
                    })
                    /*------ 执行操作------*/


                }).catch(() => {
                    return false
                });
                /*------ 确定提交按钮------*/
            }
            else {
                self.$message({
                    message: '请选择需要删除的行',
                    type: 'warning'
                });
            }
        },
        onchange: function(row, event, column) {
            //双击修改
            let self = this;

            self.deleteid = row.appid//赋值删除ID
            self.isupdate = false//开启编辑框
            self.form = {
                appid: row.appid,//应用程序ID
                secret: row.secret,//秘匙
                service: row.service,//dz
                protocol: row.protocol,//插件协议
            }
        },
        Getlisttable() {

            let self = this;
            var json = [
                {
                    "appid": "DErJYolASmzZNVtt_9keBeyk0vga",
                    "secret": "tl5E03gItwmwXBPO5WVSbsNZcRca",
                    "service": "https://112.93.129.154:8743",
                    "protocol": "HD86",
                    "subscommandRsp": 1,
                    "subsdeviceDatasChanged": 0
                },
                {
                    "appid": "ABDJYolASmzZNVtt_6keBeyk0vgd",
                    "secret": "tl6E02gItwmwXBPO5WVSbsXZcRcb",
                    "service": "https://112.93.129.154:8743",
                    "protocol": "YL809",
                    "subscommandRsp": 0,
                    "subsdeviceDatasChanged": 1
                }
            ]
            // self.rows = json
            //获取列表执行ajax
            jQuery.ajax({
                type: "GET",
                url: "/iot/ycb/queryapp/",
                contentType: "application/json",
                dataType: "json",
                success: function(rep) {
                    if (typeof (rep) == "string") {
                        try {
                            rep = JSON.parse(rep);
                        } catch (err) {
                            rep = {
                                Code: 99999,
                                Message: '数据初始化失败，请稍后再试！'
                            }
                        }
                    }
                    if (rep.Code == 0) {
                        self.rows = rep.Response
                    }
                    else {
                        self.$message.error(rep.Message);
                    }
                }
            })
            // 模拟

        },

        formattertxt(row, column, cellValue) {
            if (column.property === 'subscommandRsp') {
                if (row.subscommandRsp == 1) {
                    return '是'
                }
                else {
                    return '否'
                }
            }
            if (column.property === 'subsdeviceDatasChanged') {
                if (row.subsdeviceDatasChanged == 1) {
                    return '是'
                }
                else {
                    return '否'
                }
            }
        }
    },
    mounted: function() {

        let self = this;

        // 获取列表
        self.Getlisttable()
        // 获取列表
    }
}
</script>
<style lang="less">
* {
    padding: 0;
    margin: 0
}

ul,
li {
    list-style: none;
}

.pageconfig-wrap {
    width: 100%;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.pageconfig-wrap .pageconfig-buttons {
    text-align: right;
    padding: 10px 0;
}

.pageconfig-table tr {
    cursor: pointer;
}

.pageconfig-wrap .pageconfig-form {
    overflow: hidden;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

.pageconfig-wrap .pageconfig-form .pageconfig-form-main {
    padding: 10px;
}

.pageconfig-wrap .el-form-item {
    float: left;
    width: 25%;
    margin-bottom: 20px;
}

.pageconfig-wrap .el-form--label-left .el-form-item__label {
    padding-left: 10px;
}

.pageconfig-wrap .el-form-item.submit-btn {
    clear: both;
    width: 100%;
    text-align: right;
}

.pageconfig-wrap .el-form-item.submit-btn .el-button {
    width: 130px;
}

.pageconfig-wrap .addform-wrap .el-form-item {
    width: 50%;
    float: left
}

.pageconfig-wrap .addform-wrap .el-form-item .el-input {
    widows: 85%;
}

.pageconfig-wrap .addform-wrap .el-form-item.submit-btn {
    clear: both;
    width: 100%;
    text-align: right;
}

.pageconfig-wrap .el-select {
    width: 100%;
}
.el-dialog {
   
    left: 25%!important;
    -ms-transform: translateX(0)!important;
    transform: translateX(0)!important;
  
}
</style>


